import React ,{useEffect,useState}from 'react'
import { Swiper, Toast } from 'react-vant';
import '../../sty.scss'
import axios from 'axios';
import '../../api/index'
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
interface list{
  title:string;
  id?:any;
  name?:string;
}  

export const items = colors.map((color, index) => (
  <Swiper.Item key={color}>
    <div
      onClick={() => {
        Toast.info(`你点击了卡片 ${index + 1}`);
      }}
    >
      {index + 1}
    </div>
  </Swiper.Item>
));

export default function Index() {
  const [list,set]=useState<Array<list>>([])
  useEffect(()=>{
    axios.get('/list', {
      params: {}
    }).then((ret) => {
      console.log(ret.data.list)
     set(ret.data.list)
    //  console.log(sj);
     
    })
  },[])
  return (
    
  <div>
    <div className="demo-swiper">indedx
    <Swiper autoplay={5000}>{items}</Swiper>
  </div>
  {list.map((a,b)=>{
    return <div key={b}>{a.title}
    <p>{a.id}</p>
    <p>{a.name}</p>
    </div>
  })}
  </div>
  )
}
